<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <div>
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="(img,index) in img" :key="index">
              <h3 class="medium">
                <el-image :src="require('@/'+img.src)" fit="contain" style="width: 940px;height: 400px"></el-image>
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-row v-show="beforeRec">
          <el-col :span="20" :offset="3" style="margin-top: 40px; margin-bottom: 40px">
            <span class="yxtuijian">请于此处选择您的理想地区和专业类型</span>
            <div style="color: rgb(97, 97, 97); font-size: 0.8em;margin-left: 50px">
              另外, 系统还会获取您的高考情况作为推荐根据, 请确保您的个人信息准确无误</div>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 40px; margin-bottom: 40px">
            <span style="margin-bottom: 50px;margin-top: 50px;font-size: 2em" class="yxtuijian">个人信息核实</span>
            <el-card style="width: 90%">
              <table class="table table-borderd">
                <thead>
                <tr>
                  <th width="15%">姓名</th>
                  <th width="10%">高考分数</th>
                  <th width="15%">选科组合</th>
                  <th width="15%">高考地区</th>
                  <th width="15%">地区排名</th>
                  <th width="30%">考试类型</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>{{users.name}}</td>
                  <td>{{users.score}}</td>
                  <td>{{users.type}}</td>
                  <td>山东省</td>
                  <td>{{users.ranks}}</td>
                  <td>普通高等学校招生全国统一考试</td>
                </tr>
                </tbody>
              </table>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 40px; margin-bottom: 40px">
            <span style="margin-bottom: 50px;margin-top: 50px;font-size: 2em" class="yxtuijian">请选择您的理想院校地区</span>
            <el-card style="width: 90%;padding-bottom: 20px">
              <el-col :span="24" :offset="3">
                <div>
                  <el-checkbox v-model="region" label="北京">北京</el-checkbox>
                  <el-checkbox v-model="region" label="天津">天津</el-checkbox>
                  <el-checkbox v-model="region" label="河北">河北</el-checkbox>
                  <el-checkbox v-model="region" label="山西">山西</el-checkbox>
                  <el-checkbox v-model="region" label="内蒙古">内蒙古</el-checkbox>
                  <el-checkbox v-model="region" label="辽宁">辽宁</el-checkbox>
                  <el-checkbox v-model="region" label="吉林">吉林</el-checkbox>
                </div>
                <div>
                  <el-checkbox v-model="region" label="黑龙江">黑龙江</el-checkbox>
                  <el-checkbox v-model="region" label="上海">上海</el-checkbox>
                  <el-checkbox v-model="region" label="江苏">江苏</el-checkbox>
                  <el-checkbox v-model="region" label="浙江">浙江</el-checkbox>
                  <el-checkbox v-model="region" label="安徽">安徽</el-checkbox>
                  <el-checkbox v-model="region" label="福建">福建</el-checkbox>
                  <el-checkbox v-model="region" label="江西">江西</el-checkbox>
                </div>
                <div>
                  <el-checkbox v-model="region" label="山东">山东</el-checkbox>
                  <el-checkbox v-model="region" label="河南">河南</el-checkbox>
                  <el-checkbox v-model="region" label="湖北">湖北</el-checkbox>
                  <el-checkbox v-model="region" label="湖南">湖南</el-checkbox>
                  <el-checkbox v-model="region" label="广东">广东</el-checkbox>
                  <el-checkbox v-model="region" label="广西">广西</el-checkbox>
                  <el-checkbox v-model="region" label="海南">海南</el-checkbox>
                </div>
                <div>
                  <el-checkbox v-model="region" label="重庆">重庆</el-checkbox>
                  <el-checkbox v-model="region" label="四川">四川</el-checkbox>
                  <el-checkbox v-model="region" label="贵州">贵州</el-checkbox>
                  <el-checkbox v-model="region" label="云南">云南</el-checkbox>
                  <el-checkbox v-model="region" label="西藏">西藏</el-checkbox>
                  <el-checkbox v-model="region" label="陕西">陕西</el-checkbox>
                  <el-checkbox v-model="region" label="甘肃">甘肃</el-checkbox>
                </div>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 40px; margin-bottom: 40px">
            <span style="margin-bottom: 50px;margin-top: 50px;font-size: 2em" class="yxtuijian">请选择您的理想专业门类</span>
            <el-card style="width: 90%;padding-bottom: 20px">
              <el-col :span="24" :offset="3">
                <div>
                  <el-checkbox v-for="(majorType,index) in types" :key="index" v-if="index<7" v-model="region" :label="majorType">{{majorType}}</el-checkbox>
                </div>
                <div>
                  <el-checkbox v-for="(majorType,index) in types" :key="majorType.id" v-if="index>7&index<14" v-model="region" :label="majorType">{{majorType}}</el-checkbox>
                </div>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 40px; margin-bottom: 40px">
            <span style="margin-bottom: 50px;margin-top: 50px;font-size: 2em" class="yxtuijian">请选择您的理想院校</span>
            <el-card style="width: 90%;padding-bottom: 20px">
              <el-col :span="24">
                <el-table
                        ref="multipleTable"
                        tooltip-effect="dark"
                        stripe
                        :data="collegess"
                        style="width: 100%;font-size:16px"
                        @selection-change="handleSelectionChange">
                  <el-table-column
                          type="selection"
                          width="80">
                    <el-checkbox></el-checkbox>
                  </el-table-column>
                  <el-table-column
                          prop="name"
                          label="院校名称 "
                          width="180">
                  </el-table-column>
                  <el-table-column
                          prop="region"
                          label="院校地区">
                  </el-table-column>
                  <el-table-column
                          prop="type"
                          label="院校类型">
                  </el-table-column>
                  <el-table-column
                          prop="level"
                          label="院校等级">
                  </el-table-column>
                  <el-table-column
                          prop="lowest"
                          label="最低录取分数">
                  </el-table-column>
                  <el-table-column label="专业介绍">
                    <template slot-scope="scope">
                      <el-button type="primary" icon="el-icon-search" @click="searchDetails(scope.row.id)">查看详情</el-button>
                    </template>

                  </el-table-column>
                </el-table>
                <div class="next">
                  <!--大于1的时候可以点, 等于1的时候点了没效果-->
                  <a href="javascript:;" v-if="page>1" class="page" @click="findAll(page-1)">&lt;上一页</a>
                  <a href="javascript:;" v-if="page==1" class="page">&lt;上一页</a>
                  <a href="javascript:;" v-for="indexpage in totalPage" v-text="indexpage" @click="findAll(indexpage)"
                     style="margin-right: 5px;margin-left: 5px" class="page"></a>
                  <!--小于最后一页的时候可以点, 在最后一页的时候点了没效果-->
                  <a href="javascript:;" v-if="page==totalPage" class="page">下一页&gt;</a>
                  <a href="javascript:;" v-if="page<totalPage" class="page" @click="findAll(page+1)">下一页&gt;</a>
                  <a class="page currentPage">当前为第<a class="page currentPage" v-text="page"></a>页</a>
                </div>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="2" style="margin-top: 20px;text-align: center">
              <el-button type="primary" @click="doRecommend()">开始志愿填报推荐</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div v-show="afterRec">

              <div class="container">
                <div>
            <span style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px; font-size: 24px" class="yxtuijian2">
                系统为您生成的志愿推荐的结果
            </span>
                </div>
                <div class="row" style="background-color: white; margin:30px 50px; padding: 20px 5px; border-radius: 5px; " >
                  <div class="col-lg-12">
                    <table class="table table-borderd table-hover">
                      <thead class="table table-borderd table-hover">
                      <tr>
                        <td>志愿号</td>
                        <td>院校名称</td>
                        <td>专业名称</td>
                        <td>专业选课要求</td>
                        <td>院校专业最低分</td>
                        <td>院校专业平均分</td>
                        <td>院校详情</td>
                      </tr>
                      </thead>
                      <tbody class="table table-borderd table-hover">
                      <tr v-for="(recommend,index) in recommended">
                        <td><span style="background-color: #FF7E00;padding: 1px 2px;
                                border-radius: 5px;color: white;">{{index+1}}</span></td>
                        <td><span v-text="recommend.college.name"></span></td>
                        <td><span v-text="recommend.collegeMajors.mname"></span></td>
                        <td><span v-text="recommend.collegeMajors.type"></span></td>
                        <td><span v-text="recommend.collegeMajors.lowest"></span></td>
                        <td><span v-text="recommend.collegeMajors.average"></span></td>
                        <td>
                          <a :href="'./majors/college.html?id='+recommend.college.id" class="tablebtn">查看详情</a>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";
    export default {
        name: "Recommend",
        components:{Header,Footer},
        data(){
            return{
              img: [
                {
                  src:'assets/img/banner.png'
                },
                {
                  src:'assets/img/banner.png'
                },
                {
                  src:'assets/img/banner.png'
                },
              ],
                users:{},
                type:"",
                region: [],
                types:[],
                selectedType:[],
                text:'',
                showGroup:false,
                colleges: [],
                selectedCollege:[],
                recommended:[],

                collegess:[],
                page:1,
                rows:9,
                totalPage:0,
                totals:0,

                beforeRec:true,
                afterRec:false
            }
        },
        computed:{
            searchResult() {
                if (this.text!=='') {
                    return this.colleges.filter(
                        item =>
                            item.indexOf(this.text) > -1,
                        this.showGroup=true,
                    );
                } else {
                    this.showGroup=false
                    return this.colleges;
                }
            }
        },
        methods:{
          searchDetails(collegeId){
            this.$router.push({
              path: '/university/'+collegeId
            });
          },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.selectedCollege = val;
            },
            test(){
                console.log(this.users.score.toString())    //分数
                console.log(this.users.type.toString())     //选课类型
                console.log(this.region.toString())         //意愿地区
                console.log(this.selectedType.toString())   //意愿专业类型
                console.log(this.selectedCollege.toString())//理想大学
            },
            findUserById(id){
                this.$axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
                    console.log("res.data.name"+res.data.name)
                    this.users = res.data;
                    console.log("this.users.name"+this.users.name)
                });
            },
            queryAllTypes(){
                this.$axios.get("http://localhost:8080/majors/queryAllTypes").then((res)=>{
                    console.log(res.data)
                    this.types = res.data;
                });
            },
            queryAllCollegesName(){
                this.$axios.get("http://localhost:8080/colleges/queryAllName").then((res)=>{
                    this.colleges = res.data;
                });
            },
            setSelectedCollege(item){
                this.selectedCollege = item;
                this.text = '';
            },
            doRecommend(){
                this.$axios.get("http://localhost:8080/users/getRecommend?score="+this.users.score+
                    "&type="+this.users.type+"&aimRegion="+this.region+"&aimMajor="
                    +this.selectedType+"&aimCollege="+this.selectedCollege).then((res)=>{
                    this.recommended = res.data;
                    console.log(this.recommended)
                });
                this.beforeRec = false;
                this.afterRec = true;
            },


            findAll(indexpage){
                if(indexpage) this.page = indexpage;
                const _this = this;
                this.$axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    _this.collegess = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            findByTags(){
                const _this = this;
                console.log("page="+this.page+"&rows="+this.rows)
                this.$axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    console.log(location.href)
                    _this.collegess = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
                console.log(window.localStorage.getItem("userid").toString());
                this.findUserById(window.localStorage.getItem("userid").toString());
                this.queryAllTypes();
                console.log("users:" + this.users.name)
                this.queryAllCollegesName();
                this.findAll();
                this.beforeRec=true;
                this.afterRec=false;
        }
    }
</script>

<style scoped>

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.el-main{
  margin-top: 70px;
}

  .el-main{
    margin-top: 70px;
  }
  .yxtuijian{
    border-left: rgb(23, 100, 182) 5px solid;
    padding-left: 20px;
    font-size: 2em;
  }
  .el-checkbox{
    width: 100px;
  }
  .next{
    text-align: center;
  }
  .page{
    text-decoration: unset;
    color: #0c0c0c;
  }
  .currentPage{
    padding-left: 20px;
  }
  .currentPage{
    padding-left: 5px;
    padding-right: 5px;
  }
</style>
